<template>
	<view>
		<u-navbar title="订单详情" :bgColor="bgColor" leftIconColor="#fff" :titleStyle="titleStyle"></u-navbar>
		<view class="bg">

		</view>
		<view class="list">
			<view class="item ddxx">
				<view class="label">
					{{$z.$t("订单信息")}}
				</view>
				<u-button type="primary" text="已完成" style="width: auto; margin: 0" size="mini"></u-button>
			</view>

			<view class="item" :class="{noafter:key+1==list.length}" v-for="(item,key) in list" :key="key">
				<view class="">
					{{item.label}}
				</view>
				<view class="value u-line-1">
					{{item.value}}
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: "#2093f5",
				titleStyle: {
					color: "#fff"
				},
				query: {},
			}
		},
		onLoad(query) {

			this.query = query
			this.init()
		},
		computed: {
			cdsj() {
				if (!this.query.sjcds) {
					return '0'
				}
				if (!this.query.sjcde) {
					return ''
				}
				// 充满自停
				return this.$z.timefn.getUTCtimeceil(this.query.sjcds, this.query.sjcde) + "分钟"
			},
			list() {
				let query = this.query
				let r = [{
						label: this.$z.$t("订单编号"),
						value: query.ddh
					},
					{
						label: this.$z.$t("开始时间"),
						value: query.sjcds || query.sjc
					},
					{
						label: this.$z.$t("结束时间"),
						value: query.sjcde
					},
					{
						label: this.$z.$t("充电时长"),
						value: this.cdsj
					},
					{
						label: this.$z.$t("设备ID"),
						value: query.gtel
					},
					{
						label: this.$z.$t("枪号"),
						value: this.$z.tdxs(query.td) + this.$z.$t("枪")
					},
					{
						label: this.$z.$t("站点名称"),
						value: query.pcsxs
					},
					{
						label: this.$z.$t("电量"),
						value: this.$z.dlxs(query.dl)
					},


				]

				if (query.jetk && query.jetk != "0") {
					r.push({
						label: this.$z.$t("支付金额"),
						value: (Number(query.jetk) + Number(query.je)) / 100 + this.$z.$t("元")
					}, {
						label: this.$z.$t("充电金额"),
						value: Number(query.je) / 100 + this.$z.$t("元")
					}, {
						label: this.$z.$t("退款金额"),
						value: Number(query.jetk) / 100 + this.$z.$t("元")
					}, )
				} else {
					r.push({
						label: this.$z.$t("金额"),
						value: Number(query.je) / 100 + this.$z.$t("元")
					}, )
				}

				r.push({
					label: this.$z.$t("支付方式"),
					value: this.$z.zffs(query)
				})
				return r
			}

		},
		methods: {
			async init() {
				if (this.query.ddh) {
					let GetRfCD = await this.$z.request("/GetRfCD", {
						ddh: this.query.ddh,
					});
					GetRfCD = GetRfCD.length == 1 ? GetRfCD[0] : {};
					this.query = {
						...this.query,
						...GetRfCD
					}
				}

				let item = this.query
				let ChargeCarSys = await this.$store.dispatch("request/getRequest", {
					url: "/ChargeCarSys",
					data: {
						gtel: item.gtel,
					},
				});
				ChargeCarSys = ChargeCarSys[0];
				let StationCar = await this.$store.dispatch("request/getRequest", {
					url: "/Station",
					data: {
						id: ChargeCarSys.pcs,
					},
				});
				this.$set(this.query, 'pcsxs', StationCar[0].pcs || "")
				this.$forceUpdate()

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f7f8;
	}

	.bg {
		height: 240rpx;
		background: #2093f5;
		// position: fixed;
		top: 80rpx;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.list {
		margin: 0rpx 30rpx;
		margin-top: -200rpx;
		background: #fff;
		border-radius: 10rpx;
		padding-bottom: 20rpx;

		.item {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			position: relative;
			color: #666666;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}

			.value {
				width: 0;
				flex: auto;
				text-align: right;
			}
		}

		.ddxx {
			height: 100rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: bold;

			.label {
				display: flex;

				&:before {
					content: "";
					width: 8rpx;
					height: 28rpx;
					background: #2093f5;
					border-radius: 4rpx;
					display: block;
					margin-right: 8rpx;
					position: relative;
					top: 8rpx;
				}
			}

		}
	}

	.noafter {
		&::after {
			display: none;
		}
	}
</style>